import { useNavigate } from "react-router-dom";
import { Category } from "@nutui/icons-react";
import { Sticky } from "@nutui/nutui-react";
import { useEffect, useState } from "react";
import { isIos } from "@/utils";
import { getSafeArea } from "@/utils/optimize";

import css from "./index.module.less";

export interface IProps {
  refIns: any;
  title: string;
  top?: number;
}

export default function NavBar({ refIns, title, top = 0 }: IProps) {
  const navigate = useNavigate();
  const [safeAreaTop, setSafeAreaTop] = useState(top);
  const [isSticky, setStickyStatus] = useState(false);
  const handleChangeSticky = (isTure: boolean) => {
    setStickyStatus(isTure);
  };

  useEffect(() => {
    if (isIos && !top) {
      setTimeout(() => {
        const { top } = getSafeArea();
        setSafeAreaTop(top);
      }, 100);
    }
  }, [top]);

  return (
    <Sticky container={refIns} top={safeAreaTop} onChange={handleChangeSticky}>
      <div
        className={[css["nva-bar"], isSticky ? css["is-sticky"] : ""].join(" ")}
      >
        <div className={css["bar-btn"]}>
          <Category
            className={css["btn-left"]}
            color="#DE1F27"
            onClick={() => navigate("/detail")}
          />
        </div>
        <span className={css["bar-title"]}>{title}</span>
        <div className={css["bar-btn"]}>
          <img src="/img/default_user.png" />
        </div>
      </div>
    </Sticky>
  );
}
